<template>
	<view class="flex-col page u-skeleton">
		<view class="header u-skeleton-rect">
			<view class="text-logo">弘翰酒业回收寄卖平台</view>
			<u-search bg-color="#FFFFFF" :disabled=true @click="toSearch" search-icon="/static/img/search.png"
				search-icon-color="#41CD8C" margin="30rpx" :clearabled="true" :show-action="false"
				placeholder="搜索酒名"></u-search>
		</view>
		<!-- 头部结束 -->
		<!-- banner开始 -->
		<view class="banner u-skeleton-rect">
			<u-swiper :list="bannerList" :effect3d="true" border-radius="18" name="image" height="230" mode="round"
				bg-color="transparent"></u-swiper>
		</view>
		<!-- 分类tabs栏 -->
		<u-tabs style="margin: 0 30rpx;" :list="brandList" v-model="current" @change="changeTabel"></u-tabs>
		<!-- 回收列表 -->
		<view v-if="processList.length>0">
			<view class="flex-col now u-skeleton-rect" v-for="(item, index) in processList" :key="item.id">
				<view class="flex-row now-phone">
					<view class="flex-row group_4">
						<image :src="item.format_image" mode="widthFix" style="width: 150rpx;" class="image_5" />
						<view class="flex-col group_5">
							<text class="text_5 u-line-1">{{item.name}}</text>
							<view class="brand-cargory flex-row">
								<view class="flex:1;">
									<view class="text_6">香型：{{item.type.name}}</view>
									<view class="text_6">品牌：{{item.brand}}</view>
								</view>
								<view @click="toRecovery(item)" class="flex-col items-center text-wrapper">
									<text>回收寄卖</text>
								</view>
							</view>
							<view class="flex-row" style="align-items: flex-end;">
								<text class="text_6">预估回收寄卖价格：</text>
								<block v-if="item.remain_pric && item.remain_pric>0">
									<text class="text_7">￥</text>
									<text
										class="text_8">{{item.remain_pric && item.remain_pric>0?item.remain_pric:"暂未定价"}}</text>/
									<text class="text_5">{{item.is_best?'箱':'瓶'}}</text>
								</block>
								<view class="price" style="color: #00c785; font-size: 32rpx;">
									￥{{item.price}}
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="flex-row robot">
					<text class="text_6">{{item.goods_desc}}</text>
				</view>
			</view>
		</view>
		<!-- 空数据 -->
		<view class="flex-col now u-skeleton-rect" v-else>
			<u-empty text="暂无数据" mode="data"></u-empty>
		</view>
		<view class="path u-skeleton-rect">
			<view class="path-header">
				<view class="path-header-left">
					回收寄卖流程 <u-icon margin-left="100rpx" size="30" name="info-circle"></u-icon>
				</view>
				<view @click="toOtherPage()" class="path-header-right">
					常见问题 <u-icon size="22" name="arrow-right"></u-icon>
				</view>
			</view>
			<view style="width: 100%;height: 80rpx;padding: 15rpx;">
				<image style="width: 100%;height: 100%;" src="/static/process1.png" mode="widthFix"></image>
			</view>
		</view>
		<u-tabbar v-model="current" :list="tabbar"></u-tabbar>
		<view class="customer-service">
			<button open-type="contact" class="servive-btn">
				<u-icon name="server-fill" size="40" color="#00C785"></u-icon>
			</button>
		</view>
		<u-modal v-model="show" :content="content" :zoom="true"></u-modal>
		<!-- 骨架 -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>


<script>
	import {
		getSort,
		getGoodsList,
		getSystem
	} from '@/api/index.js'
	import {
		tiao
	} from '../../utils/common';
	export default {
		data() {
			// 页面数据变量
			return {
				current: 0,
				show:false,
				bannerList: [],
				processList: [],
				// init请求返回的数据
				data: {},
				tabbar: [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/tabbar/tab2.png",
						"selectedIconPath": "/static/tabbar/tab1.png",
						"text": "回收寄卖"
					},
					{
						"pagePath": "/pages/mine/mine",
						"iconPath": "/static/tabbar/tab4.png",
						"selectedIconPath": "/static/tabbar/tab3.png",
						"text": "我的"
					}
				],
				// 表单请求数据
				form1: {

				},
				scrollTop: 0,
				categoryList: [],
				brandList: [],
				loading: false,
				brandId: "",
				content:""
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			// vk = this.vk;
			this.options = options;
			this.init()

		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 函数
		methods: {
			pageTo(path) {
				// vk.navigateTo(path);
			},
			init() {
				getSort().then(res => {
					console.log("分类", res);
					this.brandList = res.data.data.map(item => {
						return {
							...item,
							name: item.name
						}
					})
					this.initGoods(res.data.data[0].id)

				})
				let obj = {
					key: "banner"
				}
				getSystem(obj).then(res => {
					this.bannerList = res.data.format_images
				})
				getSystem({
					key:"notice"
				}).then(res=>{
					console.log("通知");
					if(res.data.value){
						this.show = true
						this.content = res.data.value
					}
				})
			},

			toRecovery(item) {
				let token = uni.getStorageSync("access_token")||""
				if (!token) {
					uni.showModal({
						title: '提示',
						content: "你还没有登录,是否去登录",
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							if (res.confirm == true) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						},
				
					})
					return
				}
				let url = `/pages/recovery/recovery?data=${encodeURIComponent(JSON.stringify(item))}`
				// vk.navigateTo(url);
				uni.navigateTo({
					url: url
				});
			},
			initGoods(id) {
				getGoodsList(id, {}).then(res => {
					console.log("商品", res);
					this.processList = res.data.data

				})
			},
			toOtherPage() {
				tiao('/pages/helps/helps')
			},
			toSearch() {
				tiao('/pages/search/search')
				
			},


			changeTabel(id) {
				let item = this.brandList[id];
				console.log(item);
				this.brandId = item.id
				this.initGoods(this.brandId)
			},
			
		},
		
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #F7F7F7;

		.header {
			width: 100%;
			height: 357rpx;
			box-sizing: border-box;
			background-color: #00C785;
			position: sticky;
			margin-bottom: 10rpx;

			.text-logo {
				padding: 86rpx 0 0 31rpx;
				color: #FFFFFF;
				font-size: 40rpx;
				font-weight: bold;
				font-style: italic;
			}
		}

		.banner {
			margin: -112rpx 30rpx 20rpx 30rpx;
		}

		.now {
			margin: 20rpx 30rpx 10rpx;
			padding: 20rpx 28rpx 0 28rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;

			.now-phone {
				margin-top: 18rpx;

				.group_4 {
					flex: 1 1 auto;

					.image_5 {
						border-radius: 10rpx;
						width: 120rpx;
						height: 162rpx;
					}

					.group_5 {
						margin-left: 20rpx;
						flex: 1 1 auto;

						.brand-cargory {
							align-items: center;
							justify-content: space-between;

							.text-wrapper {
								width: 160rpx;
							}
						}

						.text_5 {
							width: 100%;
							color: rgb(34, 34, 34);
							font-size: 30rpx;
							font-weight: 500;
							line-height: 33rpx;
							white-space: nowrap;
						}

						.text_6 {
							margin-top: 10rpx;
							color: rgb(153, 153, 153);
							font-size: 20rpx;
							line-height: 28rpx;
							white-space: nowrap;
						}

						.text_7 {
							margin-top: 26rpx;
							color: rgb(0, 199, 133);
							font-size: 24rpx;
							font-weight: 500;
							line-height: 33rpx;
							white-space: nowrap;
						}

						.text_8 {
							color: rgb(0, 199, 133);
							font-size: 43rpx;
							font-weight: 600;
							line-height: 55rpx;
							letter-spacing: -0.5rpx;
							white-space: nowrap;
						}
					}
				}

				.text-wrapper {
					margin-left: 10rpx;
					padding: 13rpx 0 14rpx;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					line-height: 33rpx;
					white-space: nowrap;
					background-color: rgb(0, 199, 133);
					box-shadow: 0px 2rpx 20rpx 0px rgba(0, 151, 101, 0.2);
					border-radius: 30rpx;
					width: 150rpx;
					height: 59rpx;
				}
			}

			.robot {
				margin-top: 13rpx;
				padding: 23rpx 0 16rpx;
				border-top: solid 2rpx rgb(238, 238, 238);

				.text_6 {
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 28rpx;
					white-space: nowrap;
				}

				.image_6 {
					width: 30rpx;
					height: 30rpx;
				}

				.group_7 {
					margin-left: 6rpx;
					line-height: 28rpx;
					white-space: nowrap;
					height: 28rpx;

					.text_10 {
						color: rgb(153, 153, 153);
						font-size: 20rpx;
						line-height: 28rpx;
					}

					.text_11 {
						color: rgb(0, 199, 133);
						font-size: 20rpx;
						font-weight: 500;
						line-height: 28rpx;
					}
				}
			}
		}

		.path {
			margin: 30rpx 30rpx;
			height: 253rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;

			.path-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;

				.path-header-left {
					font-weight: 700;
					font-size: 32rpx;
				}

				.path-header-right {
					font-size: 25rpx;
					color: #999999;
				}
			}
		}

		.customer-service {
			position: fixed;
			right: 2%;
			bottom: 26%;
			background-color: #ffffff;
			border-radius: 50%;

			.servive-btn {
				background: transparent;
				border-radius: 50%;
				border: 2rpx solid #00C785;
				padding: 10rpx;
				line-height: 20rpx;
			}
		}
	}

	.servive-btns {
		background: transparent;
		// border: 2rpx solid #00C785;
		padding: 10rpx;
		line-height: 20rpx;
		color: #00C785;
		&::after{
			border: none;
		}
	}
</style>